<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
  <div class="assessment">
    <!-- <nutbTitle title="月度考核费用分析"></nutbTitle> -->
    <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
      :buttons="fyButtons">
      <NuformItem label="时间" prop="checkDate" width="320px" :rules="[{ required: true, message: '日期不能为空' }]">
        <el-date-picker v-model="formData.checkDate" type="month" placeholder="请选择日期" style="width: 100%"
          value-format="yyyy-MM">
        </el-date-picker>
      </NuformItem>
      <div class="btnBox">
        <nu-button type="primary" class="searchButton" @click="searchLine">搜索</nu-button>
        <nu-button class="searchButton" @click="clearParams">清除</nu-button>
        <nu-button class="searchButton" @click="exportTable">导出</nu-button>
        <nu-button class="searchButton" v-print="printOption">打印</nu-button>
      </div>
    </NuVerifyForm>
    <div class="line"></div>
    <nu-row class="row" :gutter="20">
      <nu-col :span="24" class="col">
        <nu-echarts width="auto" height="calc((100vh - 290px) - 200px)" :option="pieOption" class="echarts" style="
                margin: auto;
                margin-top: 0;
                margin-left: 30px;
                margin-right: 30px;
                padding: 20px 0 0 0;
              " v-if="isEchart"></nu-echarts>
        <NuTableList :showFilter="false" :columns="columnsAll" :dataSource="dataSource" :options="options"
          style="margin: 0 0 20px 0">
        </NuTableList>
        <NuTableList :showFilter="false" :columns="columnsAllPrint" :dataSource="dataSourcePrint" :options="optionsPrint"
          style="position: absolute;left: -5000px;z-index: -100;opacity: 0;">
        </NuTableList>
      </nu-col>
    </nu-row>
  </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue";
import nutbTitle from "@/components/base/tableTitle.vue";
import nuEcharts from "@/components/base/echarts";
import NuVerifyForm from "@/components/verify-form";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import nuSelect from "@/components/base/select";
import nuButton from "@/components/base/button";
import NuTableList from "@/components/tableList/TableFormList";
import nuRow from "@/components/base/row.vue";
import nuTree from "@/components/base/tree";
import * as echarts from "echarts";
import { getDateTime } from "@/utils/ruoyi";
import axios from "axios";
export default {
  name: "assessment",
  components: {
    nuCol,
    nutbTitle,
    nuEcharts,
    NuVerifyForm,
    NuformItem,
    nuInput,
    nuSelect,
    nuButton,
    NuTableList,
    nuRow,
    nuTree,
  },
  data() {
    return {
      formData: {
        checkDate: "",
      },
      fyButtons: [],
      isEchart: true,
      pieOption: {
        // color: ["#40b0e2", "#69e5c1", "#626b90", "#a0a7e5"],
        // color: ['#40b0e2', '#69e5c1', '#626b90', '#a0a7e5', '#7F6AAD', '#009D85'],
        title: {
          text: "电厂月度考核费用（除条款考核外）占比",
          left: "0",
          textStyle: {
            fontWeight: "600",
            fontSize: '14'
          },
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "3%",
          right: "3%",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              show: true,
              position: "outside",
              // formatter: "{a|{b}：{d}%}\n{hr|}",
              formatter: (params) => {
                return `${params.name} : ${params.percent || 0}%`
              },
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 15, -20, 15],
                },
              },
            },
            labelLine: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1,
              },
            },
            data: [],
          },
        ],
      },
      dataSource: [],
      columns: [
        {
          label: "时间",
          prop: "time",
          show: true
        }, {
          label: "考核费用（除条款考核外）",
          prop: "totalEnergyCheckCost",
          show: true
        },
        {
          label: "按电厂考核费用（元）",
          prop: "pantCheckCost",
          show: true
        },
        {
          label: "母线电压考核电量（MWh）",
          prop: "energyCheckBusVolt",
          show: true
        }, {
          label: "全厂机组最高批复上网商运电价(元/MWh)",
          prop: "pantGridPrice",
          show: true
        }
      ],
      columnsAll: [],
      options: {
        "default-expand-all": true,
        "element-loading-background": "rgba(225,239,242)",
        "element-loading-text": "数据正在加载中",
        "row-key": "pid",
        "header-cell-style": {
          background: "rgba(105, 159, 209, 0.7)",
          color: "#fff",
          fontWeight: "bold",
          fontsize: "16px",
        },
        isNoSetHeight: true,
        height: '200px'
      },
      treeData: [],
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "id", // 唯一标识
        label: "name", // 标签显示
        children: "children", // 子级
      },
      currentLivingObj: { id: "" },
      printOption: {
        id: "multipleTable",
        preview: true,
        previewTitle: "预览",
        popTitle: "",
        extraHead: "",
        extraCss: `<meta http-equiv='Content-Language' content='zh-cn'/>`
      },
      optionsPrint: {
        'row-key': 'pid',
        height: '100vh',
        tId: 'multipleTable',
        style: 'width:1000px',
        'show-header':false 
      },
    };
  },
  computed: {
    columnsAllPrint: function () {
      return [{
        label: "名称",
        prop: "name",
        show: true
      }, {
        label: "值",
        prop: "value",
        show: true
      },];
    },
    dataSourcePrint: function () {
      let a = []
      this.columnsAll.forEach(item=> {
        a.push({
          name: item.label,
          value: this.dataSource[0][item.prop]
        })
      })
      return a
    }
  },
  created() { },
  mounted() {
    this.formData.checkDate = getDateTime("month");
    this.getTimeSharingLineData();
  },
  methods: {
    /**
     * 查询
     */
    searchLine() {
      this.$refs["formData"].searchForm("form");
    },
    /**
     * form组件内置查询事件
     */
    searchForm(val) {
      if (val) {
        this.getTimeSharingLineData();
      }
    },
    /**
     * 类型change事件
     */
    typeChange() { },
    /**
     * 清除数据
     */
    clearParams() {
      this.resetForm("formData");
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm("form");
      for (let k in this[formName]) {
        if (
          Object.prototype.toString.call(this[formName][k]) == "[object String]"
        ) {
          this[formName][k] = "";
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Array]"
        ) {
          this[formName][k] = [];
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Number]"
        ) {
          this[formName][k] = "";
        }
      }
    },
    /**
     * 导出
     */
    exportTable() {
      let postData = {
        ...this.formData
      };
      for (let k in postData) {
        if (!postData[k]) {
          delete postData[k]
        }
      }
      this.getDownload(window.api.checkElectricMonthCostDetailsExportFile, {
        ...postData
      }, `月度考核费用分析详情.xlsx`)
    },
    /**
     * 获取详情数据
     */
    getTimeSharingLineData() {
      let postData = {
        ...this.formData,
      };
      for (let k in postData) {
        if (
          postData[k] &&
          Object.prototype.toString.call(postData[k]) == "[object String]"
        ) {
          postData[k] = postData[k].toString().trim();
        }
        if (!postData[k]) {
          delete postData[k]
        }
      }
      this.$httpGet(window.api.getCheckElectricMonthCostDetails, postData)
        .then((res) => {
          if (res.code == 200) {
            this.isEchart = false;
            this.pieOption.series[0].data = res.data.baseData;
            this.pieOption.title.text = '电厂月度考核费用（除条款考核外）占比'
            let arr = []
            res.data.baseTableData[0].columns.forEach(item => {
              arr.push({
                label: item.name + "考核费用（元）",
                prop: item.name + "cost",
                show: true
              })
              arr.push({
                label: item.name + "考核电量（MWh）",
                prop: item.name + "energy",
                show: true
              })
              arr.push({
                label: item.name + "批复上网商运电价(元/MWh)",
                prop: item.name + "price",
                show: true
              })
              res.data.baseTableData[0][item.name + "cost"] = item.cost
              res.data.baseTableData[0][item.name + "energy"] = item.energy
              res.data.baseTableData[0][item.name + "price"] = item.price
            });
            this.columnsAll = JSON.parse(JSON.stringify(this.columns))
            this.columnsAll.splice(2, 0, ...arr)
            this.dataSource = res.data.baseTableData;
            this.$nextTick(() => {
              this.isEchart = true;
            });
          } else {
            this.dataSource = [];
          }
        })
        .catch((err) => {
          this.dataSource = [];
        });
    },
  },
};
</script>
    
<style scoped lang="scss">
.assessment {
  height: 100%;
}

.searchForm {
  // height: calc(100% - 40px);
  display: flex;
  align-items: center;
  position: relative;
}

.btnBox {
  display: flex;
  float: right;
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 10px;
}

.row {
  height: calc(100% - 90px);
  width: 100%;
}

.col {
  height: 100%;
}

.editBtn {
  text-align: right;
}

::v-deep .el-form-item__content {
  height: 34px;
}
</style>
    
    